<template>
    <a-popover trigger="hover" placement="rightTop" :title="null" :open="open" @open-change="openChange"
        :overlay-inner-style="{padding: 0,borderRadius: '12px'}"
    >
        <div class="arbatry" title="点击重新计算" :class="info.cls" @click.stop="handleClick" v-bind="$attrs">
            <span class="arbatry-text">{{ info.text }}</span>
            <span class="arbatry-fen">
                {{ info.scoreText }}%
            </span>
        </div>
        <template #content>
            <div v-if="resume" class="w-[416px] bg-[url(/images/resumefen-bg.png)] bg-no-repeat bg-size-[100%_auto]">
                <header class="border-b border-solid border-b-[#EEEEEE] pb-4 pt-16 px-11" :class="reactionitem.cls">
                    <span class="font-[900] text-4xl fen">{{ resume.baseScore }}</span>
                    <span class="text-sm font-bold pl-1 unit">分</span>
                    <span class="text-sm font-medium inline-block ml-4 desc">{{ reactionitem.text }}</span>
                </header>
                <main class="px-5">
                    <section class="border-b border-solid border-b-[#EEEEEE] pt-4 px-[10px]" :class="showTagBlocks ? 'pb-4' : 'pb-12'">
                        <div class="flex flex-row items-center mb-[10px]">
                            <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                            <span class="text-sm text-primary font-bold mr-3">年龄</span>
                            <span class="text-sm text-third w-20">{{resume.age}}岁</span>
                            <img :src="resume.isAgeMatch ? '/images/resumefen-hege.png' : '/images/resumefen-buhege.png'" :width="16" :height="16" class="size-4 mr-[6px]" />
                            <span class="text-sm text-[#1FB887]" v-if="resume.isAgeMatch">符合岗位要求</span>
                            <span class="text-sm text-[#F53F3F]" v-else>不符合岗位要求</span>
                        </div>
                        <div class="flex flex-row items-center mb-[10px]">
                            <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                            <span class="text-sm text-primary font-bold mr-3">学历</span>
                            <span class="text-sm text-third w-20">{{ mapEducation.get(resume.education) }}</span>
                            <img :src="resume.isEducationMatch ? '/images/resumefen-hege.png' : '/images/resumefen-buhege.png'" :width="16" :height="16" class="size-4 mr-[6px]" />
                            <span class="text-sm text-[#1FB887]" v-if="resume.isEducationMatch">符合岗位要求</span>
                            <span class="text-sm text-[#F53F3F]" v-else>不符合岗位要求</span>
                        </div>
                        <div class="flex flex-row items-center" :class="resume.schoolMatchTag ? 'mb-[10px]' : ''">
                            <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                            <span class="text-sm text-primary font-bold mr-3">经验</span>
                            <span class="text-sm text-third w-20">{{ resume.experienceDesc }}</span>
                            <img :src="resume.isExperienceMatch ? '/images/resumefen-hege.png' : '/images/resumefen-buhege.png'" :width="16" :height="16" class="size-4 mr-[6px]" />
                            <span class="text-sm text-[#1FB887]" v-if="resume.isExperienceMatch">符合岗位要求</span>
                            <span class="text-sm text-[#F53F3F]" v-else>不符合岗位要求</span>
                        </div>
                        <div class="flex flex-row items-center" v-if="resume.schoolMatchTag">
                            <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                            <span class="text-sm text-primary font-bold mr-3">院校</span>
                            <span class="text-sm text-third w-20">{{ resume.schoolMatchTag }}</span>
                            <img :src="resume.isSchoolMatch ? '/images/resumefen-hege.png' : '/images/resumefen-buhege.png'" :width="16" :height="16" class="size-4 mr-[6px]" />
                            <span class="text-sm text-[#1FB887]" v-if="resume.isSchoolMatch">符合岗位要求</span>
                            <span class="text-sm text-[#F53F3F]" v-else>不符合岗位要求</span>
                        </div>
                    </section>
                    <section class="pt-4 pb-12 px-[10px]" v-if="showTagBlocks">
                        <div class="mb-4" v-if="resume.matchingJobTags.length > 0">
                            <div class="flex flex-row items-center">
                                <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                                <span class="text-sm font-bold text-primary mr-4">职位匹配度</span>
                                <a-rate :value="resume.matchingJobRate!/20" allow-half disabled style="margin-top: -4px;" />
                            </div>
                            <ul class="flex flex-row flex-wrap gap-[6px] ml-[14px] mt-[10px]">
                                <li v-for="item in resume.matchingJobTags" :key="item" class="px-2 py-1 rounded-sm border border-solid border-[#CED4DB] text-sm !leading-4 text-third">
                                    {{ item }}
                                </li>
                            </ul>
                        </div>
                        <div v-if="resume.matchingSkillTags.length > 0">
                            <div class="flex flex-row items-center">
                                <img src="/images/resumefen-quan.png" :width="6" :height="6" class="size-[6px] object-cover mr-2" />
                                <span class="text-sm font-bold text-primary mr-4">技能匹配度</span>
                                <a-rate :value="resume.matchingSkillRate!/20" allow-half disabled style="margin-top: -4px;" />
                            </div>
                            <ul class="flex flex-row flex-wrap gap-[6px] ml-[14px] mt-[10px]">
                                <li v-for="item in resume.matchingSkillTags" :key="item" class="px-2 py-1 rounded-sm border border-solid border-[#CED4DB] text-sm !leading-4 text-third">
                                    {{ item }}
                                </li>
                            </ul>
                        </div>
                    </section>
                </main>
            </div>
        </template>
    </a-popover>
</template>
<script lang="ts" setup>
import type { MemberChatDetailResult } from '@/api/siderBar/model';
import { mapEducation } from '@/constants/enum-options';
import { postMychatChatresumerebasescoreChatId } from '@/api/siderBar/myChat'; 
import { message } from 'ant-design-vue';

type Resume = MemberChatDetailResult;
defineOptions({
    name: 'GpResumeFen',
    inheritAttrs: false
})
const { resume, disInteract = false } = defineProps<{
    resume: Resume
    disInteract?: boolean
}>()
const emit = defineEmits<{
    success: []
    relateJob: [resumeId: number]
}>()
const info = computed(() => {
    const res = {
        cls: "",
        text: "",
        scoreText: ""
    }
    const { baseScore: score, isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch } = resume
    if (isSetValue(score)) {
        if (score < 60 || [isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch].some(l => !l)) {
            res.cls = "arbatry_buhege"
            res.text = "不符合要求"
            res.scoreText = "" + score
        } else {
            res.cls = "arbatry_hege"
            res.text = "符合要求"
            res.scoreText = "" + score
        }
    } else {
        res.cls = "arbatry_meiyou"
        res.text = "获取匹配度"
        res.scoreText = "？"
    }
    return res
})
const reactionitem = computed(() => {
    const res = {
        cls: "",
        text: "",
    }
    const { baseScore: score, isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch } = resume
    if (isSetValue(score)) {
        if (score < 60 || [isAgeMatch, isEducationMatch, isExperienceMatch, isSchoolMatch].some(l => !l)) {
            res.cls = "header-buhege"
            const hexintiaojian = resume.matchingJobRate! >= 60 && resume.matchingSkillRate! >= 60
            res.text = hexintiaojian ? "岗位匹配度较低，不建议邀约" : "不满足条件要求，不建议邀约"
        } else if (score >= 60 && score < 80) {
            res.cls = "header-hege"
            res.text = "符合要求，可以邀约"
        } else if (score >= 80){
            res.cls = "header-hege"
            res.text = "非常匹配，建议邀约"
        }
    }
    return res
})
const open = ref(false)
function openChange(vis: boolean) {
    const { baseScore } = resume
    if (isSetValue(baseScore)) {
        open.value = vis
    }
}
const loading = ref(false)
async function handleClick() {
    if (disInteract) return
    const { id: resumeId, jobId } = resume
    if (!isSetValue(jobId)) {
        emit('relateJob', resumeId!)
        return
    }
    if (loading.value) return
    try {
        loading.value = true
        await postMychatChatresumerebasescoreChatId(resumeId!)
        loading.value = false
        message.success('计算成功')
        emit('success')
    } catch (error) {
        loading.value = false
    }
}
const showTagBlocks = computed(() => resume.matchingJobTags.length > 0 || resume.matchingSkillTags.length > 0)
</script>
<style lang="less" scoped>
.arbatry {
    cursor: pointer;
    width: 136px;
    height: 28px;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    .arbatry-text {
        font-size: 12px;
        color: var(--color);
        margin-left: 26px;
    }
    .arbatry-fen {
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 42px;
        height: 20px;
        line-height: 20px;
        box-sizing: border-box;
    }
    &.arbatry_meiyou {
        --color: #FD8700;
        background-image: url(/images/jifenmeiyou.png);
    }
    &.arbatry_buhege {
        --color: #F53F3F;
        background-image: url(/images/jifenbuhege.png);
    }
    &.arbatry_hege {
        --color: #0768FA;
        background-image: url(/images/jifenhege.png);
    }
}
.header-hege {
    .fen,
    .unit {
        color: var(--color-theme);
    }
    .desc {
        color: #496EA9;
    }
    &.header-buhege {
        .fen,
        .unit {
            color: #F53F3F;
        }
        .desc {
            color: #DE6D6D;
        }
    }
}
</style>